<template>
   <div id="app">
        <div class="header">
            <div class="logo">这是Logo</div>
            <ul>
                <!-- 1.6 替换 a  -->
                <!-- exact 将首页定位严格匹配 -->
                <li> <router-link to="/" exact>首页</router-link> </li>
                <li> <router-link to="/about">公司介绍</router-link> </li>
                <li> <router-link to="/news">公司新闻</router-link> </li>
                <li> <router-link to="/user">用户中心</router-link> </li>
            </ul>
        </div>
        <div class="container">
          <!-- 1.5 一级出口 -->
          <router-view></router-view>
        </div>
        <div class="footer">这是底部信息</div>
    </div>
</template>

<script>
export default {

}
</script>

<style>
    * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .header {
            width: 1200px;
            height: 80px;
            background-color: #eeee;
            margin: 10px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header .logo {
            line-height: 60px;
            text-align: center;
            width: 180px;
            background-color: red;
            margin-left: 10px;
            color: #fff;
        }

        .header ul li {
            display: inline-block;
            border: 1px solid blue;
            margin: 10px;
        }

        .header ul li a {
            display: inline-block;
            padding: 10px 20px;
        }

        .header ul li a.active {
            background-color: red;
            color: #fff;
        }

        .container {
            width: 1200px;
            min-height: 500px;
            border: 2px solid black;
            margin: 20px auto;
        }

        .idx,
        .about,
        .news,
        .news-info,
        .product,
        .user,
        .login {
            border: 2px solid blue;
            margin: 10px;
            min-height: 200px;
        }

        .user {
            display: flex;
        }

        .user .menu {
            width: 200px;
        }

        .user .menu li {
            border: 1px solid blue;
            margin: 5px 10px;
        }

        .user .menu li a {
            display: block;
            text-align: center;
            line-height: 40px;
        }

        .user .menu li a.active {
            background-color: red;
            color: #fff;
        }

        .user .main {
            flex: 1;
            border: 1px solid green;
            margin: 10px;
        }

        .user .main .pos {
            line-height: 50px;
            background-color: #eee;
            display: flex;
            justify-content: space-between;
            margin: 10px;
            padding: 0 10px;
        }

        .user .main .box {
            border: 2px solid orange;
            padding: 20px;
            min-height: 100px;
            margin: 10px;
        }

        .login {
            padding: 50px;
        }
</style>
